<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       *{
       	padding:0;
       	margin:0;
       }
       html,body,#container{
       	width:100%;
       	height:100%;
       }
       #container{
       	 position:relative;
       }
       #content{
       	width:80%;
       	height: 1500px;
       	background-color:rgb(255,200,10);
       	float: left;
       }
       #right{
       	width:20%;
       	height: 900px;
       	background-color: rgb(2,255,200);
        float:right;
       }
       #right_in{
       	width: 100%;
       	height:50%;
       	background-color: rgb(255,0,0);
       }
       #content_in{
       	width: 100%;
       	height:50%;
       	background-color: rgb(0,255,0);
       }
	</style>
	   
</head>
<body>
	<div id="container">
		<div id="content">
			<div id="content_in"></div>
		</div>
		<div id="right">
			<div id="right_in"></div>
		</div>
	</div>
    <script>
	 var $=function(id){
	    	return document.getElementById(id);
	    };
	    var addEvent=function(element,event,func){
           if(element.addEventListener){
           	   element.addEventListener(event,func,false);
           	  
           }else{
           	   element.attachEvent("on"+event,func);
           }
	    };
        var domSlider=$("right");
        var scrollEvent=function() {
        	
              var slideHeight=domSlider.offsetHeight;
              var screenHeight=document.documentElement.clientHeight||document.body.clientHeight;
              var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
              if(scrollHeight+screenHeight>slideHeight){
              	domSlider.style.cssText="position:fixed;right:0px;top:"+(-(slideHeight-screenHeight))+"px";
              }else{
                 domSlider.style.cssText="float:right";
              }
       
        };    
        addEvent(window,"scroll",function(){
               scrollEvent();
        });
        addEvent(window,"resize",function(){
               scrollEvent();
        });
	</script>
</body>
</html>